import {ProCard} from "@ant-design/pro-components";
import {Button, Input, message, Popconfirm, Space} from "antd";
import React, {useRef, useState} from "react";
import DictTypeTable from "@/pages/system/dict/components/DictTypeTable";
import DictDataTable from "@/pages/system/dict/components/DictDataTable";
import {DeleteOutlined} from '@ant-design/icons';
import DictDataEdit from "@/pages/system/dict/components/DictDataEdit";
import {addDictData, addDictType, deleteDictType, updateDictType} from "@/pages/system/dict/api";
import DictTypeEdit from "@/pages/system/dict/components/DictTypeEdit";
import {API} from "@/services/typings";

const {Search} = Input;
const DictManager: React.FC = () => {

  const [name, setName] = useState<string>('');
  const [selectType, setSelectType] = useState<API.IDictType | null>(null);
  const dictDataTableRef = useRef<any>();
  const dictTypeTableRef = useRef<any>();

  return (
    <ProCard split="vertical">
      <ProCard
        style={{minHeight: '60vh'}}
        extra={
          <Search
            placeholder="输入类型名称搜索字典类型"
            onSearch={(value) => {
              setName(value)
            }}/>
        }
        title="字典类型"
        colSpan="30%"
        bordered
      >
        <DictTypeTable
          name={name}
          selectRowChange={(record) => {
            setSelectType(record)
          }}
          actionRef={dictTypeTableRef}
        />
      </ProCard>
      <ProCard
        extra={<Space>
          {selectType &&
            <DictDataEdit
              isAdd={true}
              onSubmit={async (values: API.IDictData) => {
                values.dictType = selectType.dictType
                const {data: addResult} = await addDictData(values)
                if (addResult) {
                  message.success('添加成功')
                  dictDataTableRef?.current?.reload()
                }
                return addResult
              }}
            />
          }
          <DictTypeEdit isAdd={true} onSubmit={async (values: API.IDictType) => {
            const {data: addResult} = await addDictType(values)
            if (addResult) {
              message.success('添加字典类型成功')
              dictTypeTableRef?.current?.reload()
            }
            return true
          }}/>
          {
            selectType &&
            <DictTypeEdit
              isAdd={false}
              dictType={selectType}
              onSubmit={async (values: API.IDictType) => {
                values.id = selectType.id
                const {data: updateData} = await updateDictType(values)
                if (updateData) {
                  message.success('修改字典类型成功')
                  dictTypeTableRef?.current?.reload()
                }
                return true
              }}/>
          }
          {
            selectType &&
            <Popconfirm
              title={`确认删除`}
              description={`确认删除【${selectType.dictName}】权限吗？`}
              okText="确认"
              cancelText="取消"
              onConfirm={async () => {
                const {data} = await deleteDictType(selectType.id!);
                if (data) {
                  dictTypeTableRef?.current?.reload();
                  message.success('删除成功');
                }
              }}
            >
              <Button type="primary" icon={<DeleteOutlined/>} danger>
                删除字典类型
              </Button>
            </Popconfirm>
          }
        </Space>}
        style={{minHeight: '60vh'}}
        title="字典数据"
        headerBordered>
        <DictDataTable dictType={selectType?.dictType} actionRef={dictDataTableRef}/>
      </ProCard>
    </ProCard>
  )
}

export default DictManager
